<!--
    Exception 今日值班表
    @Author: wencj
    @Date: 2020-12-22
-->
<template>
    <div class="jrzbb">
        <dg-scrollbar>
            <el-form ref="refForm" style="width: 100%" label-width="calc(4.3em + 12px)" :model="form">
                <dg-row>
                    <dg-col :span="12">
                        <el-form-item label="值班单位:" prop="dept"> 市指挥中心 </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="指挥长:" prop="status"> 郝警官 </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="值班主任:" prop="dept"> 郝主任 </el-form-item>
                    </dg-col>
                    <dg-col :span="12">
                        <el-form-item label="值班电话:" prop="status"> 1256458795 </el-form-item>
                    </dg-col>
                </dg-row>
            </el-form>
            <el-tabs style="margin-top: 0.5rem" v-model="activeName" type="card" @tab-click="handleClick" class="is-low">
                <el-tab-pane label="大事交接" name="da"></el-tab-pane>
                <el-tab-pane label="值班日志" name="zhi"></el-tab-pane>
                <el-tab-pane label="行政值班" name="xing"></el-tab-pane>
                <el-tab-pane label="指挥调度" name="zhi"></el-tab-pane>
                <el-tab-pane label="维稳调度" name="wei"></el-tab-pane>
            </el-tabs>
            <el-collapse>
                <el-collapse-item
                    v-for="(item, index) in daData"
                    :key="index"
                    :title="item.text.substring(0, 20)"
                    :name="index"
                >
                    {{ item.text.substring(20, item.text.length) }}
                </el-collapse-item>
            </el-collapse>
        </dg-scrollbar>
    </div>
</template>
<script>
export default {
    name: "jrzbb",
    props: {},
    data() {
        return {
            activeName: "da",
            daData: [
                {
                    text:
                        "有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份"
                },
                {
                    text:
                        "有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份有一份"
                }
            ],
            form: {}
        };
    },
    computed: {},
    methods: {
        handleClick() {
            console.log(1);
        }
    },
    created() {}
};
</script>
<style scoped lang="scss">
.jrzbb{
    height: 12rem;
    margin-right: -2rem;

    /deep/ .el-scrollbar__view{
        padding-right: 2rem;
    }
}
/deep/ .el-tabs__nav{
    display: flex;
    float: none;
    .el-tabs__item{
        flex: auto;
    }
}
/deep/ .el-form-item {
    margin-bottom: 0;
}
/deep/ .el-tabs__item,
/deep/ .el-tabs--top .el-tabs__item.is-top:nth-child(2),
/deep/ .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding: 0 5px;
}
/deep/ .el-collapse-item__header {
    padding: 0;
    border-bottom: 0;
}
/deep/ .el-collapse-item__content {
    color: rgba(0, 0, 0, 0.85);
    padding-bottom: 0;
}
/deep/ .el-collapse-item {
    border: 1px solid #e8e8e8;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-left: 2px solid #4090ff;
}
/deep/ .el-collapse-item__wrap,
/deep/ .el-collapse {
    border-bottom: 0;
    border-top: 0;
}
</style>